<template>
  <a-row :gutter="8">
    <h1>无尽的拉格朗日舰队分析助手</h1>
    <div>备注：目前的锁定序列和分摊计算不一定正确，UI样式也不是最终稿，仅为开发中原型核心计算功能演示，请大家多多提出意见</div>
  </a-row>
  <a-row :gutter="8">
    <a-select v-model:value="selectedToBeAddShipModelId" show-search placeholder="选择一条舰船来添加" style="width: 200px"
      :options="shipModelOptions" @change="handleSelectOurFleetChange" :filter-option="filterOption">
    </a-select>
    <a-input-number v-model:value="addNumber" :min="1" :max="100000" />
    <a-button @click="addShipToOurFleet" type="primary">向己方舰队添加舰船</a-button>
    <a-button @click="addShipToEnemyFleet" type="primary">向敌方舰队添加舰船</a-button>
  </a-row>
  <a-row :gutter="8">
    <a-input-number v-model:value="deleteNumber" :min="1" :max="100000" />
    <a-button @click="deleteShipFromFleet" type="primary" danger>删除给定的数量</a-button>
    <a-button @click="deleteAllShipFromFleet" type="primary" danger>删除全部此型号舰船</a-button>
  </a-row>
  <a-row :gutter="8">
    <!--我方舰队-->
    <a-col :span="12">
      <div class="fleet-root">
        <a-row :gutter="8">
          <!--后排-->
          <a-col :span="8">
            <div class="fleet-row">后排</div>
            <div :class="calculateSelectStyle(item.warshipModel.id, Factions.Our)" v-for="item in ourBackShip"
              :key="item.warshipModel.name" @click="() => {
                fleetViewStore.setselectedShip(item.warshipModel.id, Factions.Our)
              }">
              {{ item.warshipModel.name }} * {{ item.count }}
            </div>
          </a-col>
          <!--中排-->
          <a-col :span="8">
            <div class="fleet-row">中排</div>
            <div :class="calculateSelectStyle(item.warshipModel.id, Factions.Our)" v-for="item in ourMiddleShip"
              :key="item.warshipModel.name" @click="() => {
                fleetViewStore.setselectedShip(item.warshipModel.id, Factions.Our)
              }">
              {{ item.warshipModel.name }} * {{ item.count }}
            </div>
          </a-col>
          <!--前排-->
          <a-col :span="8">
            <div class="fleet-row">前排</div>
            <div :class="calculateSelectStyle(item.warshipModel.id, Factions.Our)" v-for="item in ourFrontShip"
              :key="item.warshipModel.name" @click="() => {
                fleetViewStore.setselectedShip(item.warshipModel.id, Factions.Our)
              }">
              {{ item.warshipModel.name }} * {{ item.count }}
            </div>
          </a-col>
        </a-row>
      </div>
    </a-col>
    <!--敌方舰队-->
    <a-col :span="12">
      <div class="fleet-root">
        <a-row :gutter="8">
          <!--后排-->
          <a-col :span="8">
            <div class="fleet-row">前排</div>
            <div :class="calculateSelectStyle(item.warshipModel.id, Factions.Enemy)" v-for="item in enemyFrontShip"
              :key="item.warshipModel.name" @click="() => {
                fleetViewStore.setselectedShip(item.warshipModel.id, Factions.Enemy)
              }">
              {{ item.warshipModel.name }} * {{ item.count }}
            </div>
          </a-col>
          <!--中排-->
          <a-col :span="8">
            <div class="fleet-row">中排</div>
            <div :class="calculateSelectStyle(item.warshipModel.id, Factions.Enemy)" v-for="item in enemyMiddleShip"
              :key="item.warshipModel.name" @click="() => {
                fleetViewStore.setselectedShip(item.warshipModel.id, Factions.Enemy)
              }">
              {{ item.warshipModel.name }} * {{ item.count }}
            </div>
          </a-col>
          <!--前排-->
          <a-col :span="8">
            <div class="fleet-row">后排</div>
            <div :class="calculateSelectStyle(item.warshipModel.id, Factions.Enemy)" v-for="item in enemyBackShip"
              :key="item.warshipModel.name" @click="() => {
                fleetViewStore.setselectedShip(item.warshipModel.id, Factions.Enemy)
              }">
              {{ item.warshipModel.name }} * {{ item.count }}
            </div>
          </a-col>
        </a-row>
      </div>
    </a-col>
  </a-row>
  <br />
  <a-row :gutter="8">
    <a-col :span="6">
      <div class="fleet-root">
        <div class="fleet-row">舰队武器分摊池</div>
        <div class="fleet-row" v-for="sharePool in fleetStore.ourFleetSharePoolList" :key="sharePool.id">
          <div>
            武器名称： {{ convertWeaponModelIdToWeaponName(sharePool.weaponModelId) }}
            <br />
            <div class="share-number">分摊数： {{ sharePool.shareNumber }}</div>
          </div>
          <div class="be-attacked-ship">可以攻击的敌方舰船：</div>
          <div class="be-attacked-ship" v-for="shipGroup in sharePool.shipList" :key="shipGroup.warshipModel.name">
            {{ shipGroup.warshipModel.name }}
            *
            {{ shipGroup.count }}
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="6">
      <div class="fleet-root" v-if="fleetStore.ourSelectedShipSharePool">
        <div class="fleet-row">当前选中的舰船：{{ convertShipModelIdToShipModelName(fleetViewStore.selectedShip?.id as string) }}
        </div>
        <div class="fleet-row">选中的舰船的武器分摊池</div>
        <div class="fleet-row" v-for="sharePool in fleetStore.ourSelectedShipSharePool" :key="sharePool.id">
          <div>
            武器名称： {{ convertWeaponModelIdToWeaponName(sharePool.weaponModelId) }}
            <br />
            <div class="share-number">分摊数： {{ sharePool.shareNumber }}</div>
          </div>
          <div class="be-attacked-ship">可以攻击的敌方舰船：</div>
          <div class="be-attacked-ship" v-for="shipGroup in sharePool.shipList" :key="shipGroup.warshipModel.name">
            {{ shipGroup.warshipModel.name }}
            *
            {{ shipGroup.count }}
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="6"></a-col>
    <a-col :span="6"></a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { CarilionReconModel, Cas066IntegratedModel, Eris1HeavyCannonModel, TaurusPulseCannonModel, WingedHussarAntiShipModel, convertWeaponModelIdToWeaponName, convertShipModelIdToShipModelName, shipModelList, findShipModelById } from '@/coreModel/shipConfig';
import { Row, type ModelShipGroup, type WarShipModel } from '@/coreModel/types';
import { useFleetNewStore } from '@/stores/fleetNew';
import { computed, ref } from 'vue'
import { useFleetFightViewStore } from './store/fleetFightViewStore';
import { Factions } from '@/coreModel/types'
import { message, type SelectProps } from 'ant-design-vue';

const fleetStore = useFleetNewStore()

const fleetViewStore = useFleetFightViewStore()
const calculateSelectStyle = (id: string, factions: Factions): string => {
  return fleetViewStore.calculateIsSelectedShipModel(id, factions) ? 'fleet-row--selected' : 'fleet-row'
}

// ===================计算前排，中排，后排舰船==========================
const ourFrontShip = computed<ModelShipGroup[]>(() => {
  return fleetStore.ourFleet.shipList.filter((shipGroup) => {
    return shipGroup.warshipModel.shipTemplate.standRow == Row.Front
  })
})
const ourMiddleShip = computed<ModelShipGroup[]>(() => {
  return fleetStore.ourFleet.shipList.filter((shipGroup) => {
    return shipGroup.warshipModel.shipTemplate.standRow == Row.Middle
  })
})
const ourBackShip = computed<ModelShipGroup[]>(() => {
  return fleetStore.ourFleet.shipList.filter((shipGroup) => {
    return shipGroup.warshipModel.shipTemplate.standRow == Row.Back
  })
})

const enemyFrontShip = computed<ModelShipGroup[]>(() => {
  return fleetStore.enemyFleet.shipList.filter((shipGroup) => {
    return shipGroup.warshipModel.shipTemplate.standRow == Row.Front
  })
})
const enemyMiddleShip = computed<ModelShipGroup[]>(() => {
  return fleetStore.enemyFleet.shipList.filter((shipGroup) => {
    return shipGroup.warshipModel.shipTemplate.standRow == Row.Middle
  })
})
const enemyBackShip = computed<ModelShipGroup[]>(() => {
  return fleetStore.enemyFleet.shipList.filter((shipGroup) => {
    return shipGroup.warshipModel.shipTemplate.standRow == Row.Back
  })
})

// =============选择器相关操作===================
const shipModelListForSelector = shipModelList.map(shipModel => {
  return { value: shipModel.id, label: shipModel.name }
})
const addNumber = ref(1)
// 舰船可选值
const shipModelOptions = ref<SelectProps['options']>([
  ...shipModelListForSelector
]);
const selectedToBeAddShipModelId = ref<string | undefined>(undefined); // 被下拉框选中的舰船id
// 添加舰船的下拉框选择的回调函数
const handleSelectOurFleetChange = (value: string) => {
  selectedToBeAddShipModelId.value = value
};
// 添加己方舰船的回调函数
const addShipToOurFleet = () => {
  if (!selectedToBeAddShipModelId.value) {
    return
  }
  const shipModel = findShipModelById(selectedToBeAddShipModelId.value)
  console.log(`为己方舰队添加 ${shipModel?.name}`);
  if (shipModel) {
    fleetStore.addShipToFleet(shipModel, addNumber.value, Factions.Our)
  }
}
// 添加敌方舰船的回调函数
const addShipToEnemyFleet = () => {
  if (!selectedToBeAddShipModelId.value) {
    return
  }
  const shipModel = findShipModelById(selectedToBeAddShipModelId.value)
  console.log(`为敌方舰队添加 ${shipModel?.name}`);
  if (shipModel) {
    fleetStore.addShipToFleet(shipModel, addNumber.value, Factions.Enemy)
  }
}
// “添加舰船下拉框”的搜索辅助函数--filterOption是一个告诉selector组件“如何搜索”的函数。input代表用户输入，option是selector中的项。这个桉树存储的是“用户输入 与 options项的比对逻辑”
const filterOption = (input: string, option: { value: string, label: string }) => {
  return option.label.indexOf(input.toLowerCase()) >= 0;
};

const deleteNumber = ref(1)

const deleteShipFromFleet = () => {
  if (!fleetViewStore.selectedShip?.id) {
    message.error('请先选中一条舰船再执行删除指令')
    return
  }
  const shipModel = findShipModelById(fleetViewStore.selectedShip.id) as WarShipModel
  fleetStore.deleteShipFromFleet(shipModel, deleteNumber.value, fleetViewStore.selectedShip.factions)
}
const deleteAllShipFromFleet = () => {
  if (!fleetViewStore.selectedShip?.id) {
    message.error('请先选中一条舰船再执行删除指令')
    return
  }
  const shipModel = findShipModelById(fleetViewStore.selectedShip.id) as WarShipModel
  fleetStore.deleteShipFromFleet(shipModel, 0, fleetViewStore.selectedShip.factions, true)
}

</script>
<style scoped lang="scss">
.fleet-root {
  background: #0092ff;
  padding: 8px 8px;

  .fleet-row {
    background: #c0e3ff;
    padding: 8px 8px;
    margin-bottom: 8px;
    cursor: pointer;
  }

  .fleet-row--selected {
    background: #ff8585;
    padding: 8px 8px;
    margin-bottom: 8px;
    cursor: pointer;
  }
}

.be-attacked-ship {
  background: #ffeaab;
  padding: 4px 4px;
  margin-bottom: 4px;
}

.share-number {
  background: #bcffab;
  padding: 4px 4px;
  margin-bottom: 4px;
}
</style>
